<template>
	<view class="general_background">
		<view class="top">
			<image src="../../../static/img/1.jpg" mode=""></image>
			<view class="business">
				<view class="place">
					<view class="place-w">
						<text class="business-name">城市食堂(时代经典)</text>
						<text>一楼区域A，A01</text>
					</view>
					<image src="../../../static/img/1.jpg" mode=""></image>
				</view>
				<view class="Sales">
					<u-icon name="star-fill" color="#f66309"></u-icon>
					<text>3分</text>
					<text class="sold">月销量14</text>
				</view>
				<text class="number">用餐人数：1人</text>
				<view class="Jump">
					<text>点餐</text>
					<text>商家</text>
					<text>评价</text>
				</view>
			</view>
		</view>
		<view class="Score">
			<view class="Three">
				{{average}}
			</view>
			<view class="star">
				<text class="a">商家评分</text>
				<u-rate :count="count" :value="average" allowHalf="true"></u-rate>
			</view>
			<view class="attitude">
				<text>服务态度</text>
				<text class="b">{{average}}</text>
			</view>
		</view>
		<view class="button-a">
			<view class="button" @tap="changeNav(0)" :class="currentIndex === 0 ? 'nav-actived' : '' ">
				<text>全部({{total}})</text>
			</view>
			<view class="button" @tap="changeNav(1)" :class="currentIndex === 1 ? 'nav-actived' : '' ">
				<text>有图({{totalfig}})</text>
			</view>
		</view>
		<view class="Testimonials" v-if="currentIndex == 0">
			<view class="choose">
				<u-icon name="checkmark-circle-fill"></u-icon>
				<text>只看有内容的评价</text>
			</view>
			<view class="Evaluate-content" v-for="store in stores">
				<view class="Customer-messages">
					<u-avatar :src="store.avatar"></u-avatar>
					<view class="nickname">
						<text>{{store.nickName}}</text>
						<text class="time">{{getTime(store.createTime)}}</text>
					</view>
				</view>
				<view class="Customer-ratings">
					<u-rate :count="count" :value="store.grade" size="30rpx"></u-rate>
					<text>{{store.grade}} 颗小星星</text>
				</view>
				<view class="wrod">
					<view>
						{{store.content}}
					</view>
					<image :src="store.image" v-if="store.image"></image>
				</view>
			</view>
		</view>
		<!-- 有图 -->
		<view class="diagrams" v-if="currentIndex == 1">
			<view class="Evaluate-content" v-for="fig in figs">
				<view class="Customer-messages">
					<u-avatar :src="fig.avatar"></u-avatar>
					<view class="nickname">
						<text>{{fig.nickName}}</text>
						<text class="time">{{getTime(fig.createTime)}}</text>
					</view>
				</view>
				<view class="Customer-ratings">
					<u-rate :count="count" :value="fig.grade" size="30rpx"></u-rate>
					<text>{{fig.grade}} 颗小星星</text>
				</view>
				<view class="wrod">
					<view>{{fig.content}}
					</view>
					<image :src="fig.image"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stores:[],
				average:null,
				figs:[],
				count:5,
				currentIndex: 0,
				createTime: null,
				createTimefig: null,
				total:null,
				totalfig:null
			}
		},
		methods: {
			changeNav(index) {
				this.currentIndex = index
			},
			getTime(time) {
				let createTime = new Date(time);
				return createTime.getFullYear()+'年'+createTime.getMonth()+'月'+createTime.getDay()+'日'+' '+createTime.getHours()+'时'+createTime.getMinutes()+'分'+createTime.getSeconds()+'秒'
			}
		},
		created() {
			this.$httpRequst("GET",'/scancode/comment/findAllCom').then(res => {
				console.log(res);
				this.stores = res.rows
				this.total = res.total
			})
			this.$httpRequst("GET",'/scancode/comment/findAvgGrade').then(res => {
				console.log(res);
				this.average = res.msg
			})
			this.$httpRequst("GET",'/scancode/comment/findComImg').then(res => {
				console.log(res);
				this.figs = res.rows
				this.totalfig = res.total
				// let createTimefig = new Date(this.fig.createTime);
				// this.createTimefig = createTimefig.getFullYear()+'年'+createTimefig.getMonth()+'月'+createTimefig.getDay()+'日'+' '+createTimefig.getHours()+'时'+createTimefig.getMinutes()+'分'+createTimefig.getSeconds()+'秒'
			})
		}
	}
</script>

<style>
	.general_background {
		width: 100%;
		background-color: #efefef;
		border-bottom: 1rpx solid;
	}

	.general_background .top {
		width: 100%;
		height: 502rpx;
		position: relative;
	}

	.general_background .top image {
		width: 100%;
		height: 500rpx;
	}

	.general_background .top .business {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		border: 1rpx solid #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.general_background .top .business .place {
		display: flex;
		margin: 20rpx;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.general_background .top .business .place text {
		display: block;
		margin-bottom: 5rpx;
	}

	.general_background .top .business .place image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.business-name {
		font-size: 40rpx;
		font-weight: bold;
	}

	.general_background .top .business .Sales {
		margin-left: 20rpx;
		font-size: 30rpx;
		margin-bottom: 5rpx;
		color: #f66309;
	}

	.general_background .top .business .Sales .u-icon {
		display: inline-block;
	}

	.general_background .top .business .Sales .sold {
		margin-left: 10rpx;
		font-size: 20rpx;
		color: #8a8a8a;
	}

	.general_background .top .business .number {
		margin-left: 20rpx;
		font-size: 25rpx;
	}

	.general_background .top .business .Jump {
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		width: 90%;
		margin: 0 auto;
		color: black;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.general_background .Score {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		padding: 0 40rpx;
	}

	.general_background .Score .Three {
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		color: red;
	}

	.general_background .Score .star {
		font-size: 25rpx;
		height: 80rpx;
		margin: 10rpx 0;
		color: #8a8a8a;
		margin-left: 10rpx;
	}

	.general_background .Score .star .a {
		margin-left: 10rpx;
	}

	.general_background .Score .attitude {
		font-size: 25rpx;
		height: 80rpx;
		width: 100rpx;
		text-align: center;
		margin: 10rpx 0 10rpx auto;
		color: #8a8a8a;
	}

	.general_background .Score .attitude .b {
		color: #000;
		display: block;
	}

	.general_background .Testimonials {
		background-color: #fff;
		margin-bottom: 60rpx;
	}

	.general_background .button-a {
		height: 100rpx;
		background-color: #fff;
		border: 1rpx solid #fff;
		display: flex;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}

	.general_background .button-a .button {
		height: 50rpx;
		width: 130rpx;
		background-color: #fef0ef;
		margin-top: 20rpx;
		margin-left: 20rpx;
		color: red;
		font-size: 25rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.general_background .button-a .nav-actived {
		// font-size: 22px;
		color: #fff;
		background-color: red;
		font-weight: bold;
	}

	.general_background .Testimonials .choose {
		display: flex;
		height: 50rpx;
		background-color: #fff;
		padding: 0 40rpx;
		font-size: 23rpx;
		line-height: 50rpx;
		color: #8a8a8a;
	}

	.general_background .Testimonials .choose .u-icon {
		margin-right: 10rpx;
	}

	.general_background .Testimonials .Evaluate-content {
		padding: 40rpx;
		border-top: 1rpx solid #efefef;
	}

	.general_background .Testimonials .Evaluate-content .Customer-ratings {
		margin-bottom: 10rpx;
		display: flex;
		font-size: 28rpx;
		color: #f66309;
	}

	.general_background .Testimonials .Evaluate-content .Customer-ratings .u-rate {
		margin-right: 20rpx;
	}

	.general_background .Testimonials .Evaluate-content .Customer-messages {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		font-size: 28rpx;
	}

	.general_background .Testimonials .Evaluate-content .Customer-messages .nickname {
		margin: 5rpx 0 5rpx 20rpx;
	}

	.general_background .Testimonials .Evaluate-content .Customer-messages .nickname .time {
		display: block;
		margin-top: 3rpx;
		font-size: 20rpx;
		color: #8a8a8a;
	}

	.general_background .Testimonials .Evaluate-content .wrod {
		background-color: #fff;
		font-size: 28rpx;
	}

	.general_background .Testimonials .Evaluate-content .wrod image {
		height: 200rpx;
		width: 300rpx;
	}

	.general_background .diagrams {
		background-color: #fff;
		margin-bottom: 60rpx;
		padding: 0 40rpx 60rpx 40rpx;
	}

	.general_background .diagrams .Evaluate-content .Customer-ratings {
		margin-bottom: 10rpx;
		display: flex;
		font-size: 28rpx;
		color: #f66309;
	}

	.general_background .diagrams .Evaluate-content .Customer-ratings .u-rate {
		margin-right: 20rpx;
	}

	.general_background .diagrams .Evaluate-content .Customer-messages {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		font-size: 28rpx;
	}

	.general_background .diagrams .Evaluate-content .Customer-messages .nickname {
		margin: 5rpx 0 5rpx 20rpx;
	}

	.general_background .diagrams .Evaluate-content .Customer-messages .nickname .time {
		display: block;
		margin-top: 3rpx;
		font-size: 20rpx;
		color: #8a8a8a;
	}

	.general_background .diagrams .Evaluate-content .wrod {
		background-color: #fff;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}

	.general_background .diagrams .Evaluate-content .wrod image {
		height: 200rpx;
		width: 300rpx;
	}
</style>
